<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<header th:fragment="header" id="header" class="uk-background-primary uk-background-norepeat uk-background-cover uk-background-center-center uk-light" style="background-image: url(/img/header.jpg);">
  <nav class="uk-navbar-container">
    <div class="uk-container">
      <div data-uk-navbar>
        <div class="uk-navbar-left">
          <a class="uk-navbar-item uk-logo uk-visible@m" href="/reception/index">在线知识问答</a>
          <a class="uk-navbar-toggle uk-hidden@m" href="#offcanvas-docs" data-uk-toggle><span
                  data-uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Articles</span></a>
        </div>
        <div class="uk-navbar-center uk-hidden@m">
          <a class="uk-navbar-item uk-logo" href="index.html">在线知识问答</a>
        </div>
        <div class="uk-navbar-right">
          <ul class="uk-navbar-nav uk-visible@m">
            <li class="uk-active"><a href="/reception/index">首页</a></li>
            <li ><a href="/article/all">所有文章</a></li>
            <li ><a href="/download/page">资源下载</a></li>
            <li th:if="${session.current_user == null}"><a href="/user/loginPage">登录</a></li>

            <li th:if="${session.current_user != null}">
              <a href="#">我的</a>
              <div class="uk-navbar-dropdown">
                <ul class="uk-navbar-dropdown-nav uk-nav-parent-icon" data-uk-nav>
                  <li><a href="/user/profile">个人信息</a></li>
                  <li><a href="/user/request/question">发布文章</a></li>
                  <li><a href="/my/article/">我发布的文章</a></li>
                  <li><a href="/my/download/page">我的资源</a></li>
                  <li><a href="/user/tags">我的文章标签</a></li>
                  <li><a href="/user/logout">登出</a></li>
                </ul>
              </div>
            </li>

            <li>
              <div class="uk-navbar-item">
                <a class="uk-button uk-button-small uk-button-primary-outline" href="/contact">联系我们</a>
              </div>
            </li>
          </ul>
          <a class="uk-navbar-toggle uk-hidden@m" href="#offcanvas" data-uk-toggle><span
                  data-uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Menu</span></a>
        </div>
      </div>
    </div>
  </nav>

  <div class="uk-section uk-position-relative uk-position-z-index" data-uk-scrollspy="cls: uk-animation-slide-bottom-medium; repeat: true">
    <div class="uk-container">
      <h1 class="uk-text-center uk-margin-remove-top">在这里您可以提问和搜索！</h1>
      <div class="hero-search uk-margin-medium-top">
        <form class="uk-search uk-search-default uk-width-1-1" name="search-hero" onSubmit="return false;">

          <input style="padding-left: 24px;float: left;border-radius: 5px 0 0 5px; width: 94%" id="searchMsg" class="uk-search-input uk-form-large uk-border-rounded" type="search"
                 placeholder="开始搜索你的问题" autocomplete="off" data-minchars="1" data-maxitems="30">

          <input style="width: 6%;float:right;border-radius: 0 5px 5px  0 ; cursor: pointer"  id="searchButton" class="uk-search-input uk-form-large uk-border-rounded" type="search"
                 placeholder="开始搜索你的问题" autocomplete="off" data-minchars="1"  value="搜索">

        </form>
      </div>
    </div>
  </div>
  <script src="/js/jquery.min.js"></script>
  <script>
    $(function () {
      $("#searchButton").click(function () {
        var keyword = $("#searchMsg").val();
        window.location.href = '/search/article?articleName='+keyword;
      })
    })
  </script>
</header>


<footer th:fragment="footer" id="footer" class="uk-section uk-text-center uk-text-muted">
  <div class="uk-container uk-container-small">
    <div>
      <ul class="uk-subnav uk-flex-center">
        <li><a href="/reception/index">首页</a></li>
        <li><a href="/article/all">所有文章</a></li>
        <li><a href="/download/page">资源下载</a></li>
        <li><a href="/contact">联系我们</a></li>
      </ul>
    </div>

    <div class="uk-margin-medium uk-text-small uk-link-muted">设计<a
            href="https://drifter.works/">由</a>XXXX团队支持</div>
  </div>
</footer>


</body>
</html>